import { useState } from 'react'
import { userApi } from '@/services/api'
import { trackEvent } from '@/utils/analytics'

export default function LoginForm() {
    const [username, setUsername] = useState('')
    const [password, setPassword] = useState('')

    const handleLogin = async (e) => {
        e.preventDefault()

        // 按钮点击埋点
        trackEvent('button_click', {
            buttonName: 'login_submit',
            username
        })

        try {
            const response = await userApi.login({ username, password })
            if (response.success) {
                // 登录成功埋点
                trackEvent('login_success', {
                    username
                })
            }
        } catch (error) {
            // 错误已在请求拦截器中处理埋点
            console.error('登录失败:', error)
        }
    }

    return (
        <form onSubmit={handleLogin}>
            <input
                type="text"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                placeholder="用户名"
            />
            <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="密码"
            />
            <button type="submit">登录</button>
        </form>
    )
} 